<template>
  <div class="container">
    <!-- 操作栏 -->
    <Header @refresh="refresh"> </Header>
    <div class="page-main">
      <div class="page-main-query con-header">
        <FilterBar>
          <template #left>
            <el-input
              class="input"
              placeholder="搜索事件名称"
              v-model="query.evtName"
              @input="queryChange"
            >
            </el-input>
            <el-select
              v-model="query.appId"
              class="input"
              placeholder="请选择所属应用"
              clearable
              filterable
              @change="refresh"
            >
              <el-option
                v-for="(item, index) in appListArr"
                :key="index"
                :label="item.appName"
                :value="item.id"
              >
              </el-option>
            </el-select>
            <el-select
              v-model="query.sts"
              class="input"
              placeholder="请选择状态"
              clearable
              @change="refresh"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <el-button type="primary" class="search-btn" @click="reset"
              >重置</el-button
            >
          </template>
          <template #right>
            <el-button type="primary" @click="routerToView('EventAdd')"
              >新增</el-button
            >
          </template>
        </FilterBar>
      </div>
      <!-- 表格 -->
      <DynamicTable
        class="table-container"
        :total="total"
        v-model:current="page.current"
        v-model:size="page.size"
        :data="list"
        :columns="tableColumns"
        @pagination="getList"
      />
    </div>
  </div>
</template>

<script lang="jsx">
export default {
  name: "EventList",
};
</script>

<script lang="jsx" setup>
import { ElMessageBox, ElMessage } from "element-plus";
import { ref, onMounted, reactive, toRefs } from "vue";
import Header from "@/components/Header.vue";
import DynamicTable from "@/components/DynamicTable";
import FilterBar from "@/components/FilterBar.vue";
import { useListManage } from "@/hooks";
import { statusCode } from "@/utils/index.js";
import { getAppPageList } from "@/api/application.js";
import { useRouter } from "vue-router";
import {
  getEventPageList,
  deleteEvent,
  getEventDetail,
  onlineEvent,
} from "@/api/event";
const props = defineProps();
const emit = defineEmits();
const query = reactive({
  evtName: "",
});
const router = useRouter();
let { page, list, total, refresh, handleDelete, getList, queryChange, reset } =
  useListManage(props, emit, {
    getItems: getEventPageList,
    query: query,
    getDetail: getEventDetail,
    deleteItem: deleteEvent,
    //   tableHeight: document.body.offsetHeight - 220
  });
const tableColumns = ref([
  {
    label: "事件名称",
    key: "evtName",
  },
  {
    label: "所属应用",
    render: (h, params) => <span>{state.appList.get(params.row.appId)}</span>,
  },
  {
    label: "主题",
    key: "topicName",
  },
  {
    label: "消费者总数限制",
    key: "subscriberCnt",
  },
  {
    label: "备注",
    key: "memo",
  },
  {
    label: "服务转事件",
    render: (h, params) => <span>{params.row.svcToEvt ? "是" : "否"}</span>,
  },
  {
    label: "状态",
    render: (h, params) => {
      return h("div", [
        h(
          "span",
          {
            class: {
              green: params.row.sts == "A" ? true : false,
              red: true,
            },
          },
          statusCode[params.row.sts]
        ),
      ]);
    },
  },
  {
    label: "操作",
    fixed: "right",
    width: "250px",
    render: (h, params) => (
      <span>
        {
          <el-button
            type="text"
            size="small"
            onClick={() => routerToView("EventDetail", params.row.id)}
          >
            详情
          </el-button>
        }

        {
          <el-button
            type="text"
            size="small"
            onClick={() => sendStatus(params.row.id, params.row.sts)}
          >
            {params.row.sts == "A" ? "下线" : "上线"}
          </el-button>
        }
        {
          <el-button
            type="text"
            size="small"
            onClick={() =>
              routerToLog("EventLog", params.row.id, params.row.evtName)
            }
          >
            日志
          </el-button>
        }
        {
          <el-button
            type="text"
            size="small"
            onClick={() => routerToView("EventEdit", params.row.id)}
          >
            编辑
          </el-button>
        }
        {
          <el-popconfirm
            title="确定删除吗？"
            confirmButtonText="好的"
            cancelButtonText="不用了"
            onConfirm={() => handleDelete(params.row)}
            v-slots={{
              reference: () => (
                <el-button type="text" size="small">
                  删除
                </el-button>
              ),
            }}
          />
        }
      </span>
    ),
  },
]);
// 状态码
const options = ref([
  {
    value: "A",
    label: "已上线",
  },
  {
    value: "D",
    label: "已下线",
  },
]);

const sendStatus = (id, sts) => {
  // console.log(id, sts);
  let str = sts == "A" ? "下线" : "上线";
  let paramsSts = sts == "A" ? "D" : "A";
  ElMessageBox.confirm(`请确认${str}？`, {
    confirmButtonText: str,
    cancelButtonText: "取消",
    type: "info",
  }).then(async () => {
    let res = await onlineEvent(id, paramsSts);
    console.log(res);
    let status = res.status == 200;
    ElMessage({
      type: status ? "success" : "error",
      message: status ? "操作成功" : "操作失败",
    });
    status ? getList() : false;
  });
};
const routerToView = (pageName, id) => {
  if (id) {
    router.push({
      name: pageName,
      query: { id },
    });
  } else {
    router.push({
      name: pageName,
    });
  }
};
const routerToLog = (pageName, id, name) => {
  router.push({
    name: pageName,
    query: { id, name },
  });
};
const state = reactive({
  appList: new Map(),
  appListArr: [],
});

const { appList, appListArr } = toRefs(state);

const getApplist = async () => {
  let { data } = await getAppPageList({ current: 1, size: 999 });
  data.list.forEach((it) => {
    state.appList.set(it.id, it.appName);
  });
  state.appListArr = data.list;
};
onMounted(() => {
  getList();
  getApplist();
});
</script>
